<!--
https://github.com/lindell/JsBarcode
format	"auto" (CODE128)	String
width	2	Number
height	100	Number
displayValue	true	Boolean
text	undefined	String
fontOptions	""	String
font	"monospace"	String
textAlign	"center"	String
textPosition	"bottom"	String
textMargin	2	Number
fontSize	20	Number
background	"#ffffff"	String (CSS color)
lineColor	"#000000"	String (CSS color)
margin	10	Number
marginTop	undefined	Number
marginBottom	undefined	Number
marginLeft	undefined	Number
marginRight	undefined	Number
valid	function(valid){}	Function
-->
<template>
  <img :id="myId"/>
</template>

<script>
  //注释掉 不然打包会打进去
//  import JsBarcode from "jsbarcode";
  import McCommon from "./McCommon"
  export default {
    name: "mc-vue-js-barcode",

    props: {
      id: {
        type: String,
        require: false,
      },
      value: {
        type: String,
        require: true,
      },
      width:{
        type:Number,
        default:2
      },
      height:{
        type:Number,
        default:50
      },
      displayValue:{
        type:Boolean,
        default:true
      },
      text:{
        type:String,default:""
      },
      format:{
        type:String,
        default:"auto"
      },
      fontOptions:{
        type:String,
        default:""
      },
      font:{
        type:String,
        default:"monospace"
      },
      textAlign:{
        type:String,
        default:"bottom"
      },
      textPosition:{
        type:String,
        default:"center"
      },
      textMargin:{
        type:Number,
        default:2
      },
      fontSize:{
        type:Number,
        default:20
      },
      margin:{
        type:Number,
        default:0
      },
      marginTop:{
        type:Number,
        default:0
      },
      marginBottom:{
        type:Number,default:0
      },
      marginLeft:{
        type:Number,default:0
      },
      marginRight:{
        type:Number,default:0
      },
      background:{
        type:String,
        default:"#ffffff"
      },
      lineColor:{
        type:String,
        default:"#000000"
      },
    },
    data(){
      return {
        options:{
        },
        myId: "mc"+McCommon.util.pubGenerateClearUUID()
      }

    },
    methods:{
      buildOptions(){
        this.options = {
//          format:this.format,
          width:this.width,
            height:this.height,
            displayValue:this.displayValue,
            text:this.text,
            fontOptions:this.fontOptions,
            font:this.font,
            textAlign:this.textAlign,
            textPosition:this.textPosition,
            textMargin:this.textMargin,
            fontSize:this.fontSize,
            background:this.background,
            lineColor:this.lineColor,
            margin:this.margin,
            marginTop:this.marginTop,
            marginBottom:this.marginBottom,
            marginLeft:this.marginLeft,
            marginRight:this.marginRight
        }
      },
      getId(){
        return "#"+this.myId;
      },
      render(){
        this.buildOptions();
        JsBarcode(this.getId(), this.value,this.options);
      }
    },
    mounted() {
      this.render();
    },
    watch: {
      value(newVal) {
        this.buildOptions();
        JsBarcode(this.getId(), newVal, this.options);
      },
      padding(newVal) {
        this.padding=newVal;
        this.render();
      },
      width(newVal) {
        this.width = newVal;
        this.render();
      },
      height(newVal) {
        this.height = newVal;
        this.render();
      },displayValue(newVal) {
        this.displayValue = newVal;
        this.render();
      },text(newVal) {
        this.text = newVal;
        this.render();
      },fontOptions(newVal) {
        this.fontOptions = newVal;
        this.render();
      },font(newVal) {
        this.font = newVal;
        this.render();
      },textAlign(newVal) {
        this.textAlign = newVal;
        this.render();
      },textPosition(newVal) {
        this.textPosition = newVal;
        this.render();
      },textMargin(newVal) {
        this.textMargin = newVal;
        this.render();
      },fontSize(newVal) {
        this.fontSize = newVal;
        this.render();
      },background(newVal) {
        this.background = newVal;
        this.render();
      },lineColor(newVal) {
        this.lineColor = newVal;
        this.render();
      },margin(newVal) {
        this.margin = newVal;
        this.render();
      },marginTop(newVal) {
        this.marginTop = newVal;
        this.render();
      },marginBottom(newVal) {
        this.marginBottom = newVal;
        this.render();
      },marginLeft(newVal) {
        this.marginLeft = newVal;
        this.render();
      },marginRight(newVal) {
        this.marginRight = newVal;
        this.render();
      },
    },
  };
</script>

<style></style>
